<template>
  <button class="t-button" :disabled="disabled" :class="classList">
    <span>
      <span v-if="loading" class="t-button-loading-icon">
        <span class="loading1"></span>
        <span class="loading2"></span>
        <span class="loading3"></span>
      </span>
      <slot></slot>
    </span>
  </button>
</template>

<script setup lang="ts">
import ButtonProp from "@/views/props/Button.prop";
import { defineProps } from "vue";

const { theme, size, type, loading, disabled } = defineProps(ButtonProp);
const classList: String[] = [
  `t-button-theme-${theme}`,
  `t-button-size-${size}`,
  `t-button-type-${type}`,
];
if (loading) classList.push("t-button-loading");
</script>
<style lang="scss">
$btn-size-default: 32px;
$btn-size-large: 42px;
$btn-size-small: 24px;

$btn-theme-primary: #1a638a;
$btn-theme-primary-hover: rgba(26, 99, 138, 0.8);

$btn-theme-success: #168570;
$btn-theme-success-hover: rgba(22, 133, 112, 0.8);

$btn-theme-warning: #f5d609;
$btn-theme-warning-hover: #f5d609b6;

$btn-theme-error: #bb1c33;
$btn-theme-error-hover: rgba(187, 28, 51, 0.8);

.t-button {
  box-sizing: border-box;
  display: inline-flex;
  white-space: nowrap;
  justify-content: space-between;
  align-items: center;
  border: 1px solid #ddd;
  color: #404244;
  cursor: pointer;
  background: #fff;
  transition: color 0.2s linear, background-color 0.2s linear,
    border 0.2s linear, box-shadow 0.2s linear;
  line-height: 1;
  > span {
    display: inline-flex;
    align-items: center;
    a {
      text-decoration: none;
      outline: none;
    }
    a,a:link{
      color: #404244;
    }
    .icon {
      margin: 0 5px;
    }
  }
  
  // theme
  &.t-button-theme-default {
    background-color: white;
  }
  &.t-button-theme-default:hover {
    border-color: $theme-default-color;
    color: $theme-default-color;
  }

  &.t-button-theme-primary {
    background-color: $btn-theme-primary;
    border-color: $btn-theme-primary;
    color: white;
  }
  &.t-button-theme-primary:hover {
    background-color: $btn-theme-primary-hover;
    border-color: $btn-theme-primary-hover;
  }

  &.t-button-theme-success {
    background-color: $btn-theme-success;
    border-color: $btn-theme-success;
    color: white;
  }
  &.t-button-theme-success:hover {
    background-color: $btn-theme-success-hover;
    border-color: $btn-theme-success-hover;
  }

  &.t-button-theme-warning {
    background-color: $btn-theme-warning;
    border-color: $btn-theme-warning;
    color: white;
  }
  &.t-button-theme-warning:hover {
    background-color: $btn-theme-warning-hover;
    border-color: $btn-theme-warning-hover;
  }

  &.t-button-theme-error {
    background-color: $btn-theme-error;
    border-color: $btn-theme-error;
    color: white;
  }
  &.t-button-theme-error:hover {
    background-color: $btn-theme-error-hover;
    border-color: $btn-theme-error-hover;
  }
  // size
  &.t-button-size-default {
    height: $btn-size-default;
    border-radius: 4px;
    font-size: 14px;
    padding: {
      left: calc(#{$btn-size-default} / 3);
      right: calc(#{$btn-size-default} / 3);
    }
    .icon {
      width: calc(#{$btn-size-default} - 10px);
      height: calc(#{$btn-size-default} - 10px);
    }
  }
  &.t-button-size-large {
    height: $btn-size-large;
    border-radius: 5px;
    font-size: 16px;
    padding: {
      left: calc(#{$btn-size-large} / 3);
      right: calc(#{$btn-size-large} / 3);
    }
    .icon {
      width: calc(#{$btn-size-large} - 10px);
      height: calc(#{$btn-size-large} - 10px);
    }
  }
  &.t-button-size-small {
    height: $btn-size-small;
    border-radius: 3px;
    font-size: 12px;
    padding: {
      left: calc(#{$btn-size-small} / 3);
      right: calc(#{$btn-size-small} / 3);
    }
    .icon {
      width: calc(#{$btn-size-small} - 10px);
      height: calc(#{$btn-size-small} - 10px);
    }
  }
  // type
  &.t-button-type-link {
    background: transparent;
    border: 1px solid transparent;
    font-weight: bold;
    > span {
      position: relative;
      &::after {
        position: absolute;
        left: 0;
        bottom: -6px;
        content: "";
        width: 0;
        height: 2px;
        transition: width 0.3s ease-in-out;
      }
    }
  }
  &.t-button-type-link:hover {
    border: 1px solid transparent;
    background-color: transparent;
    > span::after {
      width: 100%;
    }
  }
  &.t-button-type-link.t-button-theme-default {
    color: #404244;
    > span {
      &::after {
        background: #404244;
      }
    }
  }
  &.t-button-type-link.t-button-theme-primary {
    color: $btn-theme-primary;
    > span {
      &::after {
        background: $btn-theme-primary;
      }
    }
  }
  &.t-button-type-link.t-button-theme-success {
    color: $btn-theme-success;
    > span {
      &::after {
        background: $btn-theme-success;
      }
    }
  }
  &.t-button-type-link.t-button-theme-warning {
    color: $btn-theme-warning;
    > span {
      &::after {
        background: $btn-theme-warning;
      }
    }
  }
  &.t-button-type-link.t-button-theme-error {
    color: $btn-theme-error;
    > span {
      &::after {
        background: $btn-theme-error;
      }
    }
  }
  &.t-button-type-text {
    border: 1px solid transparent;
    background-color: transparent;
  }
  &.t-button-type-text:hover {
    border: 1px solid transparent;
    background: #00000008;
  }
  &.t-button-type-text.t-button-theme-primary {
    color: $btn-theme-primary;
  }
  &.t-button-type-text.t-button-theme-success {
    color: $btn-theme-success;
  }
  &.t-button-type-text.t-button-theme-warning {
    color: $btn-theme-warning;
  }
  &.t-button-type-text.t-button-theme-error {
    color: $btn-theme-error;
  }
  // disabled
  &.t-button-type-default[disabled] {
    border: none;
    cursor: not-allowed;
    background: #f7f7f7;
    color: #c5c8ce;
    &:hover {
      background: #f7f7f7;
    }
  }
  &.t-button-type-link[disabled] {
    border: none;
    cursor: not-allowed;
    background: transparent;
    color: #c5c8ce;
    &:hover {
      background: transparent;
    }
    > span {
      &::after {
        background: #c5c8ce;
      }
    }
  }
  &.t-button-type-text[disabled] {
    border: none;
    cursor: not-allowed;
    background: transparent;
    color: #c5c8ce;
    &:hover {
      background: transparent;
    }
  }
  &.t-button-loading {
    cursor: not-allowed;
    opacity: 0.6;
    .t-button-loading-icon {
      position: relative;
      > span {
        position: absolute;
        display: inline-block;
        top: 0;
        left: 0;
        border-radius: 50%;
        background: inherit;
        content: "";
        width: 100%;
        height: 100%;
        animation: ball-scale-multiple 2.1s infinite;
        &.loading1 {
          animation-delay: -0.7s;
        }
        &.loading2 {
          animation-delay: -1.4s;
        }
        &.loading3 {
          animation-delay: -2.1s;
        }
      }
    }
  }
  &.t-button-loading.t-button-theme-default {
    .t-button-loading-icon > span {
      background-color: #333;
    }
  }
  &.t-button-loading.t-button-theme-primary {
    .t-button-loading-icon > span {
      background-color: $btn-theme-primary;
    }
  }
  &.t-button-loading.t-button-theme-success {
    .t-button-loading-icon > span {
      background-color: $btn-theme-success;
    }
  }
  &.t-button-loading.t-button-theme-warning {
    .t-button-loading-icon > span {
      background-color: $btn-theme-warning;
    }
  }
  &.t-button-loading.t-button-theme-error {
    .t-button-loading-icon > span {
      background-color: $btn-theme-error;
    }
  }
  &.t-button-loading.t-button-type-default {
    .t-button-loading-icon > span {
      background-color: white;
    }
  }
  &.t-button-loading.t-button-type-default.t-button-theme-default {
    .t-button-loading-icon > span {
      background-color: #333;
    }
  }
  // size
  &.t-button-size-default {
    .t-button-loading-icon {
      width: calc(#{$btn-size-default} / 2);
      height: calc(#{$btn-size-default} / 2);
    }
  }
  &.t-button-size-large {
    .t-button-loading-icon {
      width: calc(#{$btn-size-large} / 2);
      height: calc(#{$btn-size-large} / 2);
    }
  }
  &.t-button-size-small {
    .t-button-loading-icon {
      width: calc(#{$btn-size-small} / 2);
      height: calc(#{$btn-size-small} / 2);
    }
  }
  @keyframes ball-scale-multiple {
    0% {
      transform: scale(0);
      opacity: 0;
    }
    15% {
      opacity: 0.72;
    }
    100% {
      transform: scale(1);
      opacity: 0;
    }
  }
}
</style>
